//引入重置样式和公共样式以及其他样式  =>swaiper
@import"../../assets/css/reset.css";
@import"../../assets/css/common.css";
@import"../../assets/libs/fonts/iconfont.css";
html,body{
    height: 100%;
    width: 100%;
}
.head{
    width: 100%;
    height: 75px;
    line-height: 50px;
    position: relative;
    border: none;
 

    div{
        width: 1000px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        line-height:  75px;
       p:nth-child(1){
        display: flex;
        flex-direction: column;
        justify-content: center;
       }
       p:nth-child(2){
        color: rgb(142, 142, 142);
        a{
            color: rgb(2, 190, 255);
        }
       }
        img{
            width: 230px;
            height: 30px;
        }
    }
}
main{
    background-color: rgb(243, 245, 248);
    height: 100%;
    
    .register-content{
        position: relative;
        width: 1000px;
        min-width: 1000px;
        height: 700px;
        margin: auto;
        background-color: #fff;
        margin-top: 100px;
        .form{
            height: 540px;
            width: 420px;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%,-50%);
            // background-color: rgb(155, 220, 175);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            // 百款注册
            h2{
                font-size: 24px;
                user-select: none;
                margin-top: 20px;
               
            }
            // 300元
            p:nth-child(3){
                height: 40px;
                width: 100%;
                background-color: #ed510a;
                line-height: 40px;
                text-indent: 48px;
                border-radius: 4px;
                border: none;
                color: #fff;
                .icon-jiangli-{
                    font-size: 20px;
                color: #fff;
                vertical-align: bottom;
                }
               
            }
            // 用户名
            p:nth-child(4){
                height: 40px;
                position: relative;
              input{
                height: 40px;
                border: 1px solid #c5c5c5;
                outline: none;
                text-indent: 20px;
                width: 100%;
               
              }
               //    提示文字
              .number{
                position: absolute;
                top: 10px;
                right: -217px;
                color: #f15b5b;
                text-indent: 20px;
                font-size: 13px;
                display: none;
                &.icon-jinggao{
                    color: red;
                }
                span{
                    vertical-align:middle;
                }
               
            }
            
            }
            // 手机号
            p:nth-child(5){
                height: 40px;
                position: relative;
               input{
                height: 40px;
                width: 100%;
                margin-bottom: 25px;
                border: 1px solid #c5c5c5;
                outline: none;
                text-indent: 20px;
               }
            //    提示文字
               .phone{
                display: block;
                color: #f15b5b;
                text-indent: 20px;
                font-size: 13px;
                position: absolute;
                top: 9px;
                right: -151px;
                display: none;
    
                span{
                    vertical-align:middle;
                }
               }
            }
            // 短信验证码
            p:nth-child(6){
                height: 40px;
                position: relative;
                input{
                    height: 40px;
                    width: 100%;
                    /* border-radius: 4px; */
                    margin-bottom: 25px;
                    border: 1px solid #c5c5c5;
                    outline: none;
                    text-indent: 20px;
                }
                button{
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    height: 40px;
                    width: 125px;
                    border: 1px solid #c5c5c5;
                    cursor: pointer;
                }
            }
            // 密码
            p:nth-child(7){
                height: 40px;
                position: relative;
                input{
                    height: 40px;
                    width: 100%;
                    border: 1px solid #c5c5c5;
                    outline: none;
                    text-indent: 20px;
                    
                }
                 //    提示文字
                .pswd{
                    color: #f15b5b;
                    text-indent: 20px;
                    font-size: 13px;
                    position: absolute;
                    top: 9px;
                    right: -217px;
                display: none;
    
                    span{
                        vertical-align:middle;
                    }
                }
            }
            // 协议
            p:nth-child(8){
                height: 40px;
                // background-color: rgb(120, 59, 59);
               line-height: 40px;
                color: #e0e0e0;
                a{
                    color: rgb(2, 190, 255);
                }
            }
            // 注册
            button:nth-child(9){
                height: 50px;
                width: 100%;
                background-color: #e0e0e0;
                border: none;
                cursor: pointer;
           }
        }
    }
   

}